<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Node.js API 中文版</title>
<link rel="stylesheet" href="/public/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/public/bootstrap/css/bootstrap-theme.min.css">
<style>
#main-iframe {
  width: 100%;
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  border: none;
  background-color: #f8f8f8;
}
#op-translate a, #op-view a {
  font-weight: bold;
  color: #428bca;
}
</style>
</head>
<body>
  <div id="header">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
        <span class="navbar-brand" href="#">Node.js API 中文版</span>
      </div>
      <div class="collapse navbar-collapse navbar-ex5-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/api/" target="iframe">文档首页</a></li>
          <li id="op-translate"><a href="#" onclick="translatePage()">翻译当前页面</a></li>
          <li id="op-view"><a href="#" onclick="previewPage()">浏览当前页面</a></li>
          <li id="op-open"><a href="#" target="_blank" title="在新窗口中打开">首页</a></li>
          <li><a href="/progress" target="iframe">进度</a></li>
          <li><a href="/user/list" target="iframe">感谢</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              帮助<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="/help/faq" target="iframe">常见问题</a></li>
              <li><a href="/help/how-to-use" target="iframe">使用方法</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              关于<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="https://github.com/leizongmin/node-doc-cn" target="_blank">项目源码</a></li>
              <li><a href="https://github.com/leizongmin/node-doc-cn/issues" target="_blank">报告问题</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  <iframe id="main-iframe" name="iframe" src="/api/"></iframe>
</body>
</html>
<script src="/public/js/jquery.js"></script>
<script src="/public/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-26599868-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<script>
(function () {

  // 自动调整iframe高度
  var $w = $(window);
  var $h = $('#header');
  var $m = $('#main-iframe');
  function windowResize () {
    var h = $w.height() - $m.offset().top;
    $m.height(h);
  }
  $(window).resize(windowResize);
  windowResize();

})();

// 翻译当前页面
function translatePage () {
  var name = $('#main-iframe')[0].contentWindow.location.pathname.split('/').pop().split('.')[0];
  if (!name) name = 'index';
  open('/edit/' + name, 'iframe');
}

// 浏览当前页面
function previewPage () {
  var name = $('#main-iframe')[0].contentWindow.location.pathname.split('/').pop().split('.')[0];
  if (!name) name = 'index';
  open('/api/' + name + '.html', 'iframe');
}

// 根据当前页面自动显示相关操作
(function () {
  var iframe = $('#main-iframe')[0].contentWindow;
  var $t = $('#op-translate');
  var $v = $('#op-view');
  var $o = $('#op-open');

  // 自动在iframe中打开页面
  var p = location.hash.substr(1);
  if (p) {
    iframe.location = p;
  }

  var oldUrl = '';
  setInterval(function () {
    if (oldUrl === iframe.location.href) return;

    oldUrl = iframe.location.href;
    if (iframe.document.title) {
      $o.find('a').attr('href', oldUrl).text('[' + iframe.document.title + ']');
    } else {
      $o.find('a').attr('href', oldUrl).text('');
    }

    var p = iframe.location.pathname;
    location.hash = p;
    if (p.substr(0, 5) === '/api/') {
      $t.show();
      $v.hide();
    } else if (p.substr(0, 6) === '/edit/') {
      $t.hide();
      $v.show();
    } else {
      $t.hide();
      $v.hide();
    }
  }, 1000);
})();
</script>